import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
  DownloadOutlined,
  DownOutlined,
  UpOutlined,
  QuestionCircleOutlined,
} from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Row,
  Col,
  Card,
  Input,
  Button,
  Divider,
  Tabs,
  Badge,
  message,
  Tooltip,
  // Select,
  Modal,
} from 'antd';
import queryString from 'query-string';
import moment from 'moment';
import Link from 'umi/link';
import router from 'umi/router';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import StandardTable from '@/components/StandardTable';
import TextOverFlow from '../../components/TextOverFlow';
import Authorized from '@/utils/Authorized';
import Customer from '../../components/Customer';
import ProTable from '@/pages/components/Problem/ProblemPage/ProTable';
import ProModal from '@/pages/components/Problem/ProblemPage/ProModal';
import ProExportBtn from '@/pages/components/Problem/ProblemPage/ProExportBtn';
import proIcon from '../../../assets/proIcon.png';
import styles from '../../../utils/utils.less';
import downloadFile, { getProPagination } from '@/utils/utils';
import DictCode from '../../components/DictCode';
import SearchPersonEs from '../../components/SearchPersonEs';

const { TabPane } = Tabs;
const FormItem = Form.Item;
// const { Option } = Select;

@connect(({ dimission, publicdata, loading, login, handle }) => ({
  login,
  dimission,
  publicdata,
  handle,
  loading: loading.models.dimission,
}))
@Form.create()
class Dimission extends PureComponent {
  state = {
    proVisible: false,
    selectedRows: [],
    selectedKeys: [],
    tabList: [
      { itemCode: '1', itemName: '待联系' },
      { itemCode: '2', itemName: '已联系' },
      { itemCode: '3', itemName: '问题人员' },
      { itemCode: '4', itemName: '已取消' },
    ],
    stateMap: ['', 'default', 'processing', 'success'],
    proTable: {},
  };

  tableSearchLayout = {
    labelCol: { md: { span: 7 } },
    wrapperCol: { md: { span: 17 } },
  };

  componentDidMount() {
    const {
      location,
      activeKey,
      dispatch,
      dimission: {
        data: { pagination },
        pageOrdBys,
      },
    } = this.props;
    const { isMenuLink } = queryString.parse(location.search);
    const tempActiveKey = queryString.parse(location.search).activeKey || activeKey;
    dispatch({
      type: 'dimission/updateModelData',
      payload: {
        activeKey: tempActiveKey,
      },
    });
    const proPagination = getProPagination(tempActiveKey, '3', pagination);
    if (isMenuLink) {
      this.resetAndGeLlist(location);
    } else {
      this.getList(tempActiveKey, pageOrdBys, proPagination.current, proPagination.pageSize);
    }
  }

  toggleForm = () => {
    const { dimission, dispatch } = this.props;
    dispatch({
      type: 'dimission/updateModelData',
      payload: { expandForm: !dimission.expandForm },
    });
  };

  // 参数处理
  getDateParam = fieldsValue => {
    const tempFieldsValue = {};
    Object.keys(fieldsValue).forEach(key => {
      if (key === 'creTime') {
        tempFieldsValue.startDate =
          (fieldsValue.creTime && fieldsValue.creTime[0] && fieldsValue.creTime[0].valueOf()) ||
          null;
        tempFieldsValue.endDate =
          (fieldsValue.creTime && fieldsValue.creTime[1] && fieldsValue.creTime[1].valueOf()) ||
          null;
      } else {
        tempFieldsValue[key] = fieldsValue[key] === undefined ? null : fieldsValue[key].trim();
      }
    });
    return tempFieldsValue;
  };

  // 列表
  getList = (
    activeKey = '1',
    pageOrdBys,
    currentPage = 1,
    pageSize = 10,
    queryParam,
    isClear = true
  ) => {
    const { dispatch, form } = this.props;
    if (isClear) {
      this.setState({
        selectedKeys: [],
        selectedRows: [],
      });
    }
    form.validateFields((err, fieldsValue) => {
      const newFieldsValue = queryParam || fieldsValue;
      dispatch({
        type: 'dimission/updateModelData',
        payload: { formFieldsValue: newFieldsValue, activeKey },
      });
      if (err) return;
      const tempFieldsValue = this.getDateParam(newFieldsValue);
      const empDimissionVo = { status: activeKey, ...tempFieldsValue, pageOrdBys };
      const pageArg = { currentPage, pageSize };
      // const pagerArg = { currentPage, pageSize };
      const downloadParams = {
        ...tempFieldsValue,
        busiType: 2,
      };
      dispatch({
        type: 'dimission/updateModelData',
        payload: {
          downloadParams,
        },
      });
      if (activeKey === '3') {
        setTimeout(() => {
          const { proTable } = this.state;
          const proFormFieldsValue = { ...downloadParams };
          if (proTable.searchList) {
            proTable.searchList(proFormFieldsValue, currentPage, pageSize);
          }
        });
      } else {
        dispatch({
          type: 'dimission/fetchList',
          payload: {
            empDimissionVo,
            pageArg,
          },
        });
      }
    });
  };

  batchFeedback = () => {
    router.push('/careermanage/dimission/batchFeedback?busiType=2');
  };

  // 重置
  resetSearch = () => {
    const { form, dispatch } = this.props;
    form.resetFields();
    form.setFieldsValue({ dateArr: null });

    dispatch({
      type: 'dimission/updateModelData',
      payload: { formFieldsValue: {} },
    });
  };

  toggleProModal = flag => {
    this.setState({
      proVisible: flag,
    });
  };

  handleSelectRows = (selectedRows, selectedKeys) => {
    this.setState({ selectedRows, selectedKeys });
  };

  tabChange = activeKey => {
    const { location } = this.props;
    const pageOrdBys = [{ property: null, ordBy: null }];
    router.push({
      pathname: location.pathname,
      query: {
        activeKey,
      },
    });
    this.getList(activeKey, pageOrdBys);
  };

  // 标记问题人员
  proHandleOk = () => {
    const {
      dimission: { activeKey },
    } = this.props;
    this.getList(activeKey);
    this.toggleProModal(false);
  };

  // 展示问题人员弹窗
  showModal = flag => {
    const { selectedRows } = this.state;
    if (selectedRows.length) {
      const tempArr = selectedRows.filter(item => String(item.probFlag) === '1');
      if (tempArr.length) {
        message.error('问题人员无法做相关操作');
        return;
      }
      this.setState({
        proVisible: flag,
      });
    } else {
      message.warning('请至少选择一项');
    }
  };

  // 切换页签
  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const {
      dimission: { activeKey },
      dispatch,
    } = this.props;
    let ordBy = null;
    if (sorter.order) {
      ordBy = sorter.order === 'ascend' ? 'ASC' : 'DESC';
    }
    const pageOrdBys = [
      {
        property: sorter.field || null,
        ordBy,
      },
    ];
    dispatch({
      type: 'dimission/updateModelData',
      payload: { pageOrdBys },
    });
    this.getList(activeKey, pageOrdBys, pagination.current, pagination.pageSize, undefined, false);
  };

  // 下载
  downExcel = () => {
    const {
      dimission: { activeKey },
      form,
    } = this.props;
    const {
      dimission: { data, proListData },
    } = this.props;
    const {
      pagination: { total },
    } = data;
    const proTotal = proListData.pagination.total;
    form.validateFields(
      [
        'empName',
        'idNo',
        'custId',
        'areaId',
        'creName',
        'execState',
        ' hdlState',
        'dateArr',
        'contactOperId',
      ],
      (err, fieldsValue) => {
        if (err) return;
        const tempFieldsValue = this.getDateParam(fieldsValue);
        tempFieldsValue.status = activeKey === '3' ? undefined : activeKey;
        if (activeKey === '3') {
          if (Number(proTotal) === 0) {
            message.warning('无查询结果，不可导出');
          } else {
            downloadFile(
              { ...tempFieldsValue, busiType: 8 },
              '/esApi/problem/entry/export',
              'POST'
            );
          }
        } else if (Number(total) === 0) {
          message.warning('无查询结果，不可导出');
        } else {
          downloadFile(tempFieldsValue, '/esApi/empDimission/exportExcel', 'POST');
        }
      }
    );
  };

  // 导出
  outExcel = () => {
    const {
      dimission: { activeKey },
    } = this.props;
    const { selectedKeys } = this.state;
    if (selectedKeys.length) {
      if (activeKey === '3') {
        this.setState({
          excelLoading: true,
        });
        downloadFile(
          { detIds: selectedKeys, busiType: 8 },
          '/esApi/problem/entry/export',
          'POST',
          () => {
            this.setState({
              excelLoading: false,
            });
          }
        );
      } else {
        this.setState({
          excelLoading: true,
        });
        downloadFile(
          { dimissionIds: selectedKeys, status: activeKey },
          '/esApi/empDimission/exportExcel',
          'POST',
          () => {
            this.setState({
              excelLoading: false,
            });
          }
        );
      }
    } else {
      Modal.confirm({
        title: `如果不选择数据，则默认导出当前列表下所有数据`,
        icon: <QuestionCircleOutlined />,
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          this.downExcel();
        },
      });
    }
  };

  // 重置查询条件并获取列表
  async resetAndGeLlist(location) {
    const { queryParam } = location;
    const {
      dimission: { pageOrdBys },
    } = this.props;
    await this.resetSearch();
    await this.getList(location.query.activeKey, pageOrdBys, undefined, undefined, queryParam);
    const { dispatch } = this.props;
    dispatch({
      type: 'dimission/updateModelData',
      payload: { expandForm: Boolean(queryParam) },
    });
    dispatch({
      type: 'global/changeIsMenuLink',
      payload: location,
    });
  }

  renderAdvancedForm() {
    const {
      form: { getFieldDecorator },
      dimission: { formFieldsValue, activeKey, pageOrdBys },
    } = this.props;
    return (
      <Form layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="姓名" {...this.tableSearchLayout}>
              {getFieldDecorator('empName', {
                initialValue: formFieldsValue.empName,
              })(<Input placeholder="请输入员工姓名" maxLength={15} />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="证件号" {...this.tableSearchLayout}>
              {getFieldDecorator('idNo', {
                initialValue: formFieldsValue.idNo,
              })(<Input placeholder="请输入证件号" maxLength={18} />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="客户名称" {...this.tableSearchLayout}>
              {getFieldDecorator('custId', {
                initialValue: formFieldsValue.custId,
              })(
                <Customer
                  attr
                  allowClear
                  showSearch
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                />
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="联系人员" {...this.tableSearchLayout}>
              {getFieldDecorator('contactOperId', {
                initialValue: formFieldsValue.contactOperId,
              })(
                <SearchPersonEs
                  allowClear
                  showSearch
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                />
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="联系状态" {...this.tableSearchLayout}>
              {getFieldDecorator('contactStatus', {
                initialValue: formFieldsValue.contactStatus,
              })(
                <DictCode
                  dictType="CONTACT_STATUS"
                  allowClear
                  showSearch
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                />
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <div style={{ float: 'right', marginBottom: 24 }}>
              <Button type="primary" onClick={() => this.getList(activeKey, pageOrdBys)}>
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
                重置
              </Button>
              <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                收起 <UpOutlined />
              </a>
            </div>
          </Col>
        </Row>
      </Form>
    );
  }

  renderForm() {
    const { dimission } = this.props;
    return dimission.expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
  }

  renderSimpleForm() {
    const {
      form: { getFieldDecorator },
      dimission,
    } = this.props;
    return (
      <Form layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="姓名" {...this.tableSearchLayout}>
              {getFieldDecorator('empName', {
                initialValue: dimission.formFieldsValue.empName,
              })(<Input placeholder="请输入姓名" maxLength={15} />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="证件号" {...this.tableSearchLayout}>
              {getFieldDecorator('idNo', {
                initialValue: dimission.formFieldsValue.idNo,
              })(<Input placeholder="请输入证件号" maxLength={18} />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button
                type="primary"
                onClick={() => this.getList(dimission.activeKey, dimission.pageOrdBys)}
              >
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
                重置
              </Button>
              <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                展开 <DownOutlined />
              </a>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  render() {
    const { proVisible, selectedRows, selectedKeys, stateMap, excelLoading, tabList } = this.state;
    const {
      dimission: { data, activeKey, downloadParams },
      loading,
    } = this.props;
    const columnsDeal = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: (text, record) =>
          Number(record.probFlag) === 1 ? (
            <Tooltip
              placement="top"
              title={
                <div>
                  <p>
                    问题人员类型：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeName : '--'}
                  </p>
                  <p>
                    问题说明：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeDesc : '--'}
                  </p>
                </div>
              }
            >
              <span>
                {text}
                <img src={proIcon} alt="" />
              </span>
            </Tooltip>
          ) : (
            <span>{text}</span>
          ),
      },
      {
        title: '证件号',
        dataIndex: 'idNo',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
            width: 170,
          },
        }),
      },
      {
        title: '电话',
        dataIndex: 'mobile',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
      },

      {
        title: '所属客服',
        dataIndex: 'creName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },

      {
        title: '联系状态',
        dataIndex: 'contactStatusName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            width: 120,
          },
        }),
        render: (text, record) =>
          record.contactStatusName ? (
            <Badge
              key={record.contactStatus}
              status={stateMap[record.contactStatus]}
              text={record.contactStatusName}
            />
          ) : (
            '--'
          ),
      },
      {
        title: '创建时间',
        dataIndex: 'creTime',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        sorter: true,
        render: text => (text ? moment(text).format('YYYY-MM-DD HH:mm') : '--'),
      },
      {
        title: '联系人员',
        dataIndex: 'contactOperName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => text || '--',
      },
      {
        title: '操作',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
            width: 150,
          },
        }),
        render: (text, record) => (
          <Fragment>
            <span>
              <Link to={`/careermanage/dimission/contactbegin?dimissionId=${record.dimissionId}`}>
                {record.contactStatus === 1 ? '开始联系' : '再次联系'}
              </Link>
              <Divider type="vertical" />
              <Link to={`/careermanage/dimission/detail?dimissionId=${record.dimissionId}`}>
                查看
              </Link>
            </span>
          </Fragment>
        ),
      },
    ];
    const columnsProcess = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: (text, record) =>
          Number(record.probFlag) === 1 ? (
            <Tooltip
              placement="top"
              title={
                <div>
                  <p>
                    问题人员类型：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeName : '--'}
                  </p>
                  <p>
                    问题说明：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeDesc : '--'}
                  </p>
                </div>
              }
            >
              <span>
                {text}
                <img src={proIcon} alt="" />
              </span>
            </Tooltip>
          ) : (
            <span>{text}</span>
          ),
      },
      {
        title: '证件号',
        dataIndex: 'idNo',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
            width: 170,
          },
        }),
      },
      {
        title: '电话',
        dataIndex: 'mobile',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '所属客服',
        dataIndex: 'creName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },

      {
        title: '联系人员',
        dataIndex: 'contactOperName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },

      {
        title: '联系状态',
        dataIndex: 'contactStatusName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            width: 120,
          },
        }),
        render: (text, record) =>
          record.contactStatusName ? (
            <Badge
              key={record.contactStatus}
              status={stateMap[record.contactStatus]}
              text={record.contactStatusName}
            />
          ) : (
            '--'
          ),
      },
      {
        title: '联系时间',
        dataIndex: 'operTime',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        sorter: true,
        render: text => (text ? moment(text).format('YYYY-MM-DD HH:mm') : '--'),
      },
      {
        title: '操作',
        dataIndex: 'operation',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
            width: 80,
          },
        }),
        render: (text, record) => (
          <span>
            <Link to={`/careermanage/dimission/detail?dimissionId=${record.dimissionId}`}>
              查看
            </Link>
          </span>
        ),
      },
    ];
    const columnsCancel = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: (text, record) =>
          Number(record.probFlag) === 1 ? (
            <Tooltip
              placement="top"
              title={
                <div>
                  <p>
                    问题人员类型：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeName : '--'}
                  </p>
                  <p>
                    问题说明：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeDesc : '--'}
                  </p>
                </div>
              }
            >
              <span>
                {text}
                <img src={proIcon} alt="" />
              </span>
            </Tooltip>
          ) : (
            <span>{text}</span>
          ),
      },
      {
        title: '证件号',
        dataIndex: 'idNo',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
            width: 170,
          },
        }),
      },
      {
        title: '电话',
        dataIndex: 'mobile',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '所属客服',
        dataIndex: 'creName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '取消操作时间',
        dataIndex: 'operTime',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        sorter: true,
        render: text => (text ? moment(text).format('YYYY-MM-DD HH:mm') : '--'),
      },
      {
        title: '操作',
        dataIndex: 'operation',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
            width: 80,
          },
        }),
        render: (text, record) => (
          <Link to={`/careermanage/dimission/detail?dimissionId=${record.dimissionId}`}>查看</Link>
        ),
      },
    ];
    const tabPane1 = (
      <div>
        <Row style={{ marginBottom: 16 }}>
          <Col span={10} offset={0}>
            <Authorized authority="es:empDimission:uploadExcelRsgnInfo">
              <Button
                type="primary"
                style={{ marginRight: 8 }}
                onClick={() => router.push(`/careermanage/dimission/progress`)}
              >
                批量联系
              </Button>
            </Authorized>
            <Authorized authority="es:rsgnProb:addProb">
              <Button onClick={() => this.showModal(true)} style={{ marginRight: 8 }}>
                标记问题人员
              </Button>
            </Authorized>
            <Authorized authority="es:empDimission:exportExcel">
              <Button onClick={this.outExcel} loading={excelLoading}>
                {!excelLoading && <DownloadOutlined />}
                导出
              </Button>
            </Authorized>
          </Col>
        </Row>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedKeys}
          loading={loading}
          data={data}
          columns={columnsDeal}
          rowKey="dimissionId"
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const tabPane2 = (
      <div>
        <Row style={{ marginBottom: 16 }}>
          <Col span={10} offset={0}>
            <Authorized authority="es:empDimission:exportExcel">
              <Button onClick={this.outExcel} loading={excelLoading} type="primary">
                {!excelLoading && <DownloadOutlined />}
                导出
              </Button>
            </Authorized>
          </Col>
        </Row>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedKeys}
          loading={loading}
          data={data}
          columns={columnsProcess}
          rowKey="dimissionId"
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const tabPane3 = (
      <div>
        <Row style={{ marginBottom: 16 }}>
          <Col span={10} offset={0}>
            {/* <Button onClick={this.outExcel} type="primary" loading={excelLoading}>
              {!excelLoading && <Icon type="download" />}
              导出
            </Button> */}
            <Authorized authority="es:rsgnProb:addProbFdbk">
              <Button type="primary" onClick={this.batchFeedback} style={{ marginRight: 8 }}>
                批量反馈
              </Button>
            </Authorized>
            <Authorized authority="es:empDimission:exportExcel">
              <ProExportBtn selectedRowKeys={selectedKeys} downloadParams={downloadParams} />
            </Authorized>
          </Col>
        </Row>
        {/* <ProTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedKeys}
          loading={loading}
          data={proListData}
          rowKey="detId"
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
          proUrl="/careermanage/dimission/problem"
        /> */}
        <ProTable
          onRef={e => {
            this.setState({ proTable: e });
          }}
          selectedRows={selectedRows}
          selectedRowKeys={selectedKeys}
          onSelectRow={this.handleSelectRows}
          proUrl="/careermanage/dimission/problem"
          busiType="2"
        />
      </div>
    );
    const tabPane4 = (
      <div>
        <Authorized authority="es:empDimission:exportExcel">
          <Button
            type="primary"
            onClick={this.outExcel}
            style={{ marginBottom: 16 }}
            loading={excelLoading}
          >
            {!excelLoading && <DownloadOutlined />}
            导出
          </Button>
        </Authorized>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedKeys}
          loading={loading}
          data={data}
          columns={columnsCancel}
          rowKey="dimissionId"
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const tabPaneTem = ['', tabPane1, tabPane2, tabPane3, tabPane4];
    return (
      <PageHeaderWrapper>
        <Card className={styles.searchCard}>
          <div className={styles.tableListForm}>{this.renderForm()}</div>
        </Card>
        <Card className={styles.tabCard}>
          <Tabs activeKey={activeKey} onChange={this.tabChange}>
            {tabList.map(pane => (
              <TabPane tab={pane.itemName} key={pane.itemCode}>
                {tabPaneTem[pane.itemCode]}
              </TabPane>
            ))}
          </Tabs>

          {proVisible && (
            <ProModal
              selectedRows={selectedRows}
              selectedRowKeys={selectedKeys}
              busiType="2"
              onOk={this.proHandleOk}
              onCancel={() => this.toggleProModal(false)}
              isProType
            />
          )}
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default Dimission;
